extends ../_layout

block active
  - sidebar_active = 'profile.html'

block content
  .unwrap
    .bg-cover(style="background-image: url(img/profile-bg.jpg)")
      .p-xl.text-center.text-white
        img.img-thumbnail.img-circle.thumb128(src='img/user/09.jpg', alt="Image")
        h3.m0 Ted Berry
        p Lead director
        p Proin metus justo, commodo in ultrices at, lobortis sit amet dui. Fusce dolor purus, adipiscing a tempus at, gravida vel purus. 
    .text-center.bg-gray-dark.p-lg.mb-xl
      .row.row-table
        .col-xs-4.br
          h3.m0 400
          p.m0 
            span.hidden-xs Profile 
            span Views
        .col-xs-4.br
          h3.m0 2000
          p.m0 Likes
        .col-xs-4
          h3.m0 100
          p.m0 Following
    .p-lg
      .row
        .col-lg-9
          // START timeline
          ul.timeline
            li.timeline-separator(data-datetime="Today")
            // START timeline item
            li
              .timeline-badge.primary
                em.fa.fa-comment
              .timeline-panel
                .popover.left
                  .arrow
                  .popover-content
                    .table-grid.table-grid-align-middle.mb
                      .col.col-xs
                        img.media-object.img-circle.thumb48(src='img/user/05.jpg', alt="Image")
                      .col
                        p.m0 
                          a(href="#").text-muted: strong Aiden Curtis
                          |  posted a comment

                    p: em "Fusce pellentesque congue justo in rutrum. Praesent non nulla et ligula luctus mattis eget at lacus."
            // END timeline item
            // START timeline item
            li.timeline-inverted
              .timeline-badge.green
                em.fa.fa-picture-o
              .timeline-panel
                .popover.right
                  .arrow
                  .popover-content
                    .table-grid.table-grid-align-middle.mb
                      .col.col-xs
                        img.media-object.img-circle.thumb48(src='img/user/04.jpg', alt="Image")
                      .col
                        p.m0 
                          a(href="#").text-muted: strong James Payne
                          |  shared a new idea
                      
                    a(href="#")
                      img.img-responsive(src="img/mockup.png", alt="Img")
                    p.text-muted.mv 3 Comments
                    .media.bb.p
                      small.pull-right.text-muted 12m ago
                      .pull-left
                        img.media-object.img-circle.thumb32(src='img/user/05.jpg', alt='Image')
                      .media-body
                        .media-heading
                          p.m0: a(href="#"): strong Aiden Curtis 
                          p.m0.text-muted Hey looks great!
                    .media.bb.p
                      small.pull-right.text-muted 30m ago
                      .pull-left
                        img.media-object.img-circle.thumb32(src='img/user/08.jpg', alt='Image')
                      .media-body
                        .media-heading
                          p.m0: a(href="#"): strong Samantha Murphy
                          p.m0.text-muted Excellento job!
                    .media.bb.p
                      small.pull-right.text-muted 30m ago
                      .pull-left
                        img.media-object.img-circle.thumb32(src='img/user/04.jpg', alt='Image')
                      .media-body
                        .media-heading
                          p.m0: a(href="#"): strong James Payne
                          p.m0.text-muted WIP guys :)
                    form(method='post', action='#').mt
                      textarea.form-control.no-resize(placeholder='Comment...', rows="1")


            // START timeline item
            li
              .timeline-badge.info
                em.fa.fa-file-o
              .timeline-panel
                .popover.left
                  .arrow
                  .popover-content
                    .table-grid.table-grid-align-middle.mb
                      .col.col-xs
                        img.media-object.img-circle.thumb48(src='img/user/08.jpg', alt="Image")
                      .col
                        p.m0 
                          a(href="#").text-muted: strong Samantha Murphy
                          |  shared new files
                    ul.list-unstyled
                      li.pb
                        em.fa.fa-file-o.fa-fw.mr
                        a(href='#').text-info framework-docs-part1.pdf
                          em.pull-right.fa.fa-download.fa-fw
                      li.pb
                        em.fa.fa-file-o.fa-fw.mr
                        a(href='#').text-info framework-docs-part2.pdf
                          em.pull-right.fa.fa-download.fa-fw
                      li.pb
                        em.fa.fa-file-o.fa-fw.mr
                        a(href='#').text-info framework-docs-part3.pdf
                          em.pull-right.fa.fa-download.fa-fw
            // END timeline item
            // START timeline item
            li
              .timeline-badge.purple
                em.fa.fa-map-marker
              .timeline-panel
                .popover.left
                  .arrow
                  .popover-content
                    .table-grid.table-grid-align-middle.mb
                      .col.col-xs
                        img.media-object.img-circle.thumb48(src='img/user/08.jpg', alt="Image")
                      .col
                        p.m0 
                          a(href="#").text-muted: strong Samantha Murphy
                          |  shared new location
                    p: em "Hey guys! Please check the new location for tomorrows's meeting."
                    .gmap(data-gmap="", data-address="276 N TUSTIN ST, ORANGE, CA 92867", data-styled)

            // END timeline item

            // START timeline separator
            li.timeline-separator(data-datetime="Yesterday")
            // END timeline separator
            // START timeline item
            li
              .timeline-badge.success
                em.fa.fa-ticket
              .timeline-panel
                .popover.left
                  .arrow
                  .popover-content
                    .table-grid.table-grid-align-middle.mb
                      .col.col-xs
                        img.media-object.img-circle.thumb48(src='img/user/12.jpg', alt="Image")
                      .col
                        p.m0 
                          a(href="#").text-muted: strong Dennis Green
                          |  closed issue 
                          a(href="#") #548795
                        p.m0 
                          em &mdash; bootstrap.js needs update
            // END timeline item
            li.timeline-inverted
              .timeline-badge.warning
                em.fa.fa-ticket
              .timeline-panel
                .popover.right
                  .arrow
                  .popover-content
                    .table-grid.table-grid-align-middle.mb
                      .col.col-xs
                        img.media-object.img-circle.thumb48(src='img/user/09.jpg', alt="Image")
                      .col
                        p.m0 
                          a(href="#").text-muted: strong Ted Berry
                          |  assigned 
                          a(href="#").text-muted: strong Dennis Green
                          |  to issue 
                          a(href="#") #548795
                        p.m0 
                          em &mdash; bootstrap.js needs update
            // END timeline item
            // START timeline item
            li
              .timeline-badge.danger
                em.fa.fa-ticket
              .timeline-panel
                .popover.left
                  .arrow
                  .popover-content
                    .table-grid.table-grid-align-middle.mb
                      .col.col-xs
                        img.media-object.img-circle.thumb48(src='img/user/10.jpg', alt="Image")
                      .col
                        p.m0 
                          a(href="#").text-muted: strong Jon Perry
                          |  opened issue 
                          a(href="#") #548795
                        p.m0 
                          em &mdash; bootstrap.js needs update
            // END timeline item

            // START timeline item
            li.timeline-end
              a(href="#").timeline-badge
                em.fa.fa-plus
            // END timeline item
          // END timeline

        .col-lg-3
          .panel.panel-default
            .panel-body
              .text-center
                h3.mt0 Ted Berry
                p Lead director
              hr
              ul.list-unstyled.ph-xl
                li
                  em.fa.fa-home.fa-fw.mr-lg
                  | Somewhere, Neverland
                li
                  em.fa.fa-briefcase.fa-fw.mr-lg
                  a(href='#') Themicon.co
                li
                  em.fa.fa-graduation-cap.fa-fw.mr-lg
                  | Master Designer
          
          .panel.panel-default
            .panel-heading 
              a.pull-right(href="#"): em.icon-plus.text-muted
              | Contacts
            .list-group
                // START User status
                a(href="#").media.p.mt0.list-group-item
                  span.pull-right
                    span.circle.circle-success.circle-lg
                  span.pull-left
                    // Contact avatar
                    img.media-object.img-circle.thumb32(src='img/user/05.jpg', alt="Image")
                  // Contact info
                  span.media-body
                    span.media-heading
                      strong Juan Sims
                      br
                      small.text-muted Designeer
                // END User status
                // START User status
                a(href="#").media.p.mt0.list-group-item
                  span.pull-right
                    span.circle.circle-success.circle-lg
                  span.pull-left
                    // Contact avatar
                    img.media-object.img-circle.thumb32(src='img/user/06.jpg', alt="Image")
                  // Contact info
                  span.media-body
                    span.media-heading
                      strong Maureen Jenkins
                      br
                      small.text-muted Designeer
                // END User status
                // START User status
                a(href="#").media.p.mt0.list-group-item
                  span.pull-right
                    span.circle.circle-danger.circle-lg
                  span.pull-left
                    // Contact avatar
                    img.media-object.img-circle.thumb32(src='img/user/07.jpg', alt="Image")
                  // Contact info
                  span.media-body
                    span.media-heading
                      strong Billie Dunn
                      br
                      small.text-muted Designeer
                // END User status
                // START User status
                a(href="#").media.p.mt0.list-group-item
                  span.pull-right
                    span.circle.circle-warning.circle-lg
                  span.pull-left
                    // Contact avatar
                    img.media-object.img-circle.thumb32(src='img/user/08.jpg', alt="Image")
                  // Contact info
                  span.media-body
                    span.media-heading
                      strong Tomothy Roberts
                      br
                      small.text-muted Designer
                // END User status
                a(href="#").media.p.mt0.list-group-item.text-center.text-muted
                  | View all contacts

          .panel.panel-default
            .list-group
              a.list-group-item(href='#')
                em.pull-right.fa.fa-users.fa-lg.fa-fw.text-muted.mt
                h4.list-group-item-heading 1000
                p.list-group-item-text Friends
              a.list-group-item(href='#')
                em.pull-right.fa.fa-rss.fa-lg.fa-fw.text-muted.mt
                h4.list-group-item-heading 3000
                p.list-group-item-text Subscriptions
              a.list-group-item(href='#')
                em.pull-right.fa.fa-map-marker.fa-lg.fa-fw.text-muted.mt
                h4.list-group-item-heading 100
                p.list-group-item-text Places
              a.list-group-item(href='#')
                em.pull-right.fa.fa-briefcase.fa-lg.fa-fw.text-muted.mt
                h4.list-group-item-heading 400
                p.list-group-item-text Projects
              a.list-group-item(href='#')
                em.pull-right.fa.fa-twitter.fa-lg.fa-fw.text-muted.mt
                h4.list-group-item-heading 17300
                p.list-group-item-text Twees
            
block vendor_js
  // GOOGLE MAPS
  script(type='text/javascript', src='http://maps.google.com/maps/api/js?sensor=false')
  script(src='../vendor/jQuery-gMap/jquery.gmap.min.js')